<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>美食排行榜单</title>
		 <link rel="stylesheet" href="css/总榜styles.css">
	</head>
	<body>
		 
		 <div id="map"> 
			<div class="banner">美食排行总榜</div>
			<div class="item2"><a href="筛选.html">价格筛选</a></div>
			<div class="item1"><a href="登录页面.html">登录</a></div>
		</div>
		
		  <div class="tab-buttons">
		         <button data-tab="total">总榜</button>
		         <button class="middle" data-tab="staple">主食榜</button>
		         <button data-tab="drink">饮品榜</button>
		     </div>
			 <div class="tab-content">
			         <div id="total" class="tab-pane active">
			             <ol id="foodRankList">
			                 <li>
								 <img src="img/北京烤鸭.jpeg" alt="北京烤鸭图片" width="200px">
								 <a href="北京烤鸭.html">
									<div>
										<h2>北京烤鸭</h2>
										<p><span>评分：</span>4.8</p>
										<p><span>简短介绍：</span>作为中国北京的传统名菜，以果木炭火烤制，色泽红润，肉质肥而不腻，外脆里嫩，搭配薄饼、葱丝、黄瓜和甜面酱，风味独特。</p>
										<p><span>地址：</span></p>
									</div>
								 </a>
			                 </li>
			                 <li>
		                         <img src="img/意大利比萨.jpeg" alt="意大利披萨图片" width="200px">
								 <a href="意大利披萨.html">
									<div>
									   <h2>意大利披萨</h2>
									   <p><span>评分：</span>4.6</p>
									   <p><span>简短介绍：</span>源自意大利，饼底薄脆，上面铺满各种新鲜的食材，如番茄酱、芝士、蔬菜、火腿等，经过高温烘烤，芝士融化，香气扑鼻，口感丰富。</p>
									   <p><span>地址：</span></p>
									</div>
								 </a>
							</li>
							<li>
								<img src="img/日本寿司.jpeg" alt="日本寿司图片" width="200px">
								<a href="日本寿司.html">
									<div>
									<h2>日本寿司</h2>
									<p><span>评分：</span>4.5</p>
									<p><span>简短介绍：</span>日本的代表性美食，将生鱼片等食材铺在醋饭上，造型多样，注重食材的新鲜度，味道清淡却不失鲜美，是健康又美味的选择。</p>
									<p><span>地址：</span></p>
									</div>
								</a>
							</li><!-- 其他总榜美食 -->
						</ol>
			         </div>
					<div id="staple" class="tab-pane">
						<ol>
							<li>
								<img src="img/兰州拉面.jpeg" alt="兰州拉面图片" width="200px">
								<a href="兰州拉面.html">
									<div>
									<h2>兰州拉面</h2>
									<p><span>评分：</span>4.7</p>
									<p><span>简短介绍：</span>一清（汤清）、二白（萝卜白）、三红（辣椒油红）、四绿（香菜、蒜苗绿）、五黄（面条黄亮），面条劲道，汤鲜味美。</p>
									<p><span>地址：</span></p>
									</div>
								</a>
							</li><!-- 其他主食榜美食 -->
						</ol>
					</div>
					<div id="drink" class="tab-pane">
						<ol>
							<li>
								<img src="img/珍珠奶茶.jpeg" alt="珍珠奶茶图片" width="200px">
								<a href="珍珠奶茶.html">
									<div>
									<h2>珍珠奶茶</h2>
									<p><span>评分：</span>4.6</p>
									<p><span>简短介绍：</span>起源于台湾，Q弹的珍珠搭配香浓奶茶，冷热皆宜，口感软糯香甜，是年轻人的心头好。</p>
									<p><span>地址：</span></p>
									</div>
								</a>
							</li><!-- 其他饮品榜美食 -->
						</ol>
					</div>
		    </div>
		    <script src="js/总榜script.js"></script>
	</body>
</html>